﻿var rgraph,labelType, useGradients, nativeTextSupport, animate;
(function() {
	var ua = navigator.userAgent,
			iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
			typeOfCanvas = typeof HTMLCanvasElement,
			nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
			textSupport = nativeCanvasSupport 
				&& (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
	labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
	nativeTextSupport = labelType == 'Native';
	useGradients = nativeCanvasSupport;
	animate = !(iStuff || !nativeCanvasSupport);
})();

var Style={
	ring:{color:'rgba(0,0,0,0)',width:1},
	node:{color:'rgba(255,255,255,1)'},
	edge:{color:'rgba(255,255,255,0.25)',lineWidth:4},
	nodes:[
		{fontSize:"1.5em",color:"rgba(255,255,255,1.00)",textShadow:'0 0 9px #000'},//projet (fontSize doit différer des autre !)
		{fontSize:"0.8em",color:"rgba(255,255,255,0.75)",textShadow:'0 0 4px #000'},//epic
		{fontSize:"0.7em",color:"rgba(255,255,255,0.50)",textShadow:'0 0 3px #000'},//user stories
		{fontSize:"0.6em",color:"rgba(255,255,255,0.25)",textShadow:'0 0 3px #000'},//scenario
	]
};
var rgraph;
function init(id){
	rgraph = new $jit.RGraph({
		injectInto: id,
		duration: 750,
		background: {
			CanvasStyles: {
				strokeStyle: Style.ring.color
			}
		},
		Navigation: {
			enable: true,
			panning: true,
			zooming: 100,
		},
		Node: Style.node,
		Edge: Style.edge,

		onBeforeCompute: function(node){//2
				localStorage.centerNode = node.id;
				console.log("centering " + node.id + "...");
				/*TODO : read some info from the node*/
		},
		onCreateLabel: function(e, node){
			var type=node.id.split('_')[0];
			e.innerHTML = node.name;
			e.title=">>"+type+"<<\n";
			for(var attr in node.data)
				e.title+=attr+":"+node.data[attr]+'\n';
			
			if(node.data.tested=="1"){
				e.innerHTML = '<span class="'+(node.data.succeed=="1"?'checked':'')+'">&#10004;</span>'+e.innerHTML;
			}

			e.onclick = function(e){//1
				if(e.target.style.fontSize==Style.nodes[0].fontSize && rgraph.offline==false){//on a clické sur un noeud focus
					IHM.loadEditModal(node.data,type,e);
				}
				rgraph.onClick(node.id, {
					onComplete: function() {//3
						console.log("done");
					}
				});
			};
		},
		onPlaceLabel: function(e, node){
			e.style.cursor = 'pointer';
			var i=Math.min(node._depth,Style.nodes.length-1);
			for(var attr in Style.nodes[i])
				e.style[attr]=Style.nodes[i][attr];
			e.style.left = (parseInt(e.style.left) - e.offsetWidth / 2) + 'px';
		}
	});
	rgraph.offline=false;
	rgraph.refreshContent=function(intro){
		if(intro==undefined)intro=0;
		var url=location.port=='8080'?'./getall.jsp':'php/ajax.php';
		$.getJSON(url,function(json_bad){
			rgraph.loadJSON(json2graph(json_bad));
			rgraph.compute('end');
			rgraph.fx.animate({modes:['polar'],duration:intro});
		});
	};
	rgraph.refreshContent(1000);
}
